<template>
	<div class="login-container">
		<div class="box-item desc">
			<div class="welcome">
				<p>欢迎登录墨者智云</p>
				<p class="sub-welcome">进销存运营一站式管理系统</p>
			</div>
		</div>
		<div class="box-item login">
			<div class="login-title">账号登录</div>
			<a-alert v-if="errMessage" type="error" showIcon style="margin-bottom: 14px;border-radius:4px;" :message="errMessage" />
			<a-form class="login-form">
				<a-form-item>
					<a-input v-model:value="user.username" placeholder="请输入用户名" allowClear />
				</a-form-item>
				<a-form-item>
					<a-input-password autocomplete="on" v-model:value="user.password" allowClear placeholder="请输入密码" />
				</a-form-item>
				<a-form-item>
					<div class="d-flex d-flex-between d-flex-middle">
						<a-checkbox>记住密码</a-checkbox>
						<span class="font12 color-999 cursor" @click="goMarket">云菜场管理系统</span>
					</div>
				</a-form-item>
				<a-form-item>
					<a-button size="large" type="primary" @click="toLogin" class="btn" :disabled="btnLoading" :loading="btnLoading">{{btnLoading? '登录中...':'登录'}}</a-button>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>
<script setup lang="ts">
import { reactive,ref,onMounted,onUnmounted } from "vue";
import { useRouter } from 'vue-router';
import { useUserStore } from '../../store/modules/user';
import { saveTokenToCookie } from '../../utils/cookie-util';
import { localClear } from '../../utils/local-util';
import { message } from 'ant-design-vue';
import { loginApi } from '@/api/main/login-api';
let btnLoading = ref<boolean>(false)
let errMessage = ref('')
const router = useRouter()
let user = reactive({
	username:'',
	password:''
})
function goMarket(){
	window.location.href="/web/#/login"
}
async function toLogin() {
	console.log(user)
	if(!user.username){
		errMessage.value = '请输入用户名'
		return
	}
	if(!user.password){
		errMessage.value = '请输入密码'
		return
	}
	try {
		btnLoading.value = true;
		const res = await loginApi.login({'loginName':user.username,'password':user.password});
		saveTokenToCookie(res.data.tokenInfo.tokenValue ? res.data.tokenInfo.tokenValue : '');
		useUserStore().setUserInfo(res.data.user);
		router.push({ path: '/home' })
		localClear();
		user.username = ''
		user.password = ''
		message.success('恭喜您，登录成功！')
	}catch(e:any){
		errMessage.value = e.message;
	}finally{
		btnLoading.value = false;
	}
}
onMounted(() => {
	document.onkeyup = (e) => {
		if(user.password){
			if (e.code === 'NumpadEnter' || e.code === 'enter' || e.code === 'Enter') {
				toLogin();
			}
		}
	};
});
onUnmounted(() => {
	document.onkeyup = null;
});
</script>
<style>
.login-container{
    width: 100%;
    height: 100vh;
    background: url(@/assets/login-bg.png) no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.welcome {
    background: url(@/assets/left-bg1.png) no-repeat center;
    background-size: cover;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0px 6px 20px 0px rgba(33,47,117,0.10);
    padding-top: 35px;
}
.welcome p {
	color: #553334;
	line-height: 25px;
	letter-spacing: 0.26px;
	text-align: center;
	font-weight: 700;
	font-size: 30px;
}
.welcome .sub-welcome {
	font-size:16px;
	font-weight:700;
	margin-top:15px
}
.login-container .box-item{
	width: 444px;
    height: 440px;
}
.login-container .box-item.desc{
    background: #fff;
    border-radius: 12px 0 0 12px;
    box-shadow: 0 16px 73px 8px #cbcbcb33;
    padding: 23px 25px;
}
.login-container .box-item.login{
    background: #fff;
    border-radius: 0 12px 12px 0;
    padding: 40px 42px 34px;
    position: relative;
    border: solid 1px #efefef;
	
}
.login-container .box-item .login-qr{
    position: absolute;
    top: 0;
    right: 0;
    width: 66px;
    height: 66px
}
.login-container .box-item .login-title{
    font-size: 23px;
	font-weight:400;
    text-align: center;
    color: #553334;
    margin-bottom: 35px
}

.login-container .box-item .login-form .captcha-input{
    width: 60%
}

.login-container .box-item .login-form .captcha-img{
    cursor: pointer
}
.login-container .box-item .ant-input{
	border-radius:4px;
	padding-top:10px;
	padding-bottom:10px
}
.login-container .box-item .ant-input-affix-wrapper{
	padding-top:0;
	padding-bottom:0
}

.login-container .box-item .eye-box{
    position: absolute;
    right: 15px;
    top: 10px
}

.login-container .box-item .eye-box .eye-icon{
    width: 20px;
    height: 20px;
    cursor: pointer
}
.login-container .box-item .btn{
    height: 50px;
	width:100%;
    background: #1748fd;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    cursor: pointer
}
.login-container .box-item .btn:hover{
	background: #1748fd;
}
@media screen and (max-width:1024px){
	.login-container .box-item.desc{display: none;}
	.login-container .box-item.login{border-radius:12px;border-width:0;box-shadow: 3px 3px 3px rgb(0 21 41 / 8%);}
}
@media screen and (max-width:414px){
	.login-container .box-item{
		max-width:390px
	}
}
</style>